<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf"%>
<!DOCTYPE html>
<html>
<head>
    <title><spring:message code="cc.humiture.title" /></title>
    <meta name="decorator" content="grid-select"/>
    <script src="${staticPath}/vendors/echarts/echarts.min.js"></script>

    <style type="text/css">
        body,table{
            font-size:12px;
        }
        table{
            table-layout:fixed;
            empty-cells:show;
            border-collapse: collapse;
            margin:0 auto;
            overflow-y: scroll;
            height: 300px;
        }
        td{
            height:30px;
        }
        h1,h2,h3{
            font-size:12px;
            margin:0;
            padding:0;
        }
        .table{
            border:1px solid #cad9ea;
            color:#666;
        }
        .table th {
            background-repeat:repeat-x;
            height:30px;
        }
        .table td,.table th{
            border:1px solid #cad9ea;
            padding:0 1em 0;
        }
        .table tr.alter{
            background-color:#f5fafe;
        }
    </style>
</head>
<body title="<spring:message code="cc.humiture.title" />">

    <div id="echartsMain" style="height: 400px;width: 100%">
    </div>
<script type="text/javascript">
    let lineChart;
    let lineoption;
    let wendMin = parseFloat('${wendMin}');
    let wendMax = parseFloat('${wendMax}');
    let min = wendMin - 2;
    let max = wendMax + 2;
    let value = [
        [new Date().format('yyyy-MM-dd hh:mm:ss'), 0]
    ];

	$(function () {
		// 图表初始化
		lineChart = echarts.init(document.getElementById("echartsMain"));
		lineoption = {
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:[]
			},
			grid:{
				x:40,
				x2:40,
				y2:24
			},
			calculable : true,
            xAxis : [
                {
                    type : 'time'
                }
            ],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} °C'
					}
				}
			],
            series : [
                {
                    name:'温度',
                    type:'line',
                    data:value,
                    markLine : {
                        data : [
                            {name: '温度上限',yAxis: wendMax},
                            {name: '温度下限',yAxis: wendMin},
                        ]
                    }
                }
            ]
		};
		lineChart.setOption(lineoption);
		$(window).resize(lineChart.resize);

		// 获取图表数据
        $.ajax({
            type: "GET",
            url: "${adminPath}/cc/device/humiture/queryDeviceTempByTime?deviceId=${sn}&beginDate=${beginDate}&endDate=${endDate}",
            traditional: true,
            success: function (res) {
                if (res.ret == 0) {
                    reDrawLine(res.data)
                }
                else {
                    top.layer.alert(res.msg, {icon: 0, title:'提示'});
                }
            }
        });

	});

	/**
	 * 重新绘画单据查询出来的温度曲线图
	 * 一个单据编号可能对应多个设备，每一个设备都画一条曲线图
	 * @param datas
	 */
	function reDrawLine(data) {
        let preSbNo = data[0].sbNo;
        let legendData = [preSbNo];
        let sbDatas = [];
        let series = [];
        let s = {};

        for (let i = 0; i < data.length; i++) {
            // 如果这一条记录和上面的那条记录并不是同一个设备，更新曲线图数据设置
            if ((data[i].sbNo != preSbNo)) {
                s = {
                    name:preSbNo,
                    type:'line',
                    data:sbDatas,
                    lineStyle: '#000000',
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {name: '温度上限',yAxis: wendMax},
                            {name: '温度下限',yAxis: wendMin},
                        ]
                    }
                };
                sbDatas = [];
                preSbNo = data[i].sbNo;
                series.push(s);
                legendData.push(preSbNo)
            }

            // 上一个设备曲线图记录完毕，新开曲线图
            sbDatas.push([new Date(data[i].collectTime).format("yyyy-MM-dd hh:mm:ss"), data[i].temperature, data[i].electric, data[i].deviceSn]);
        }

        s = {
            name:preSbNo,
            type:'line',
            data:sbDatas,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {name: '温度上限',yAxis: wendMax},
                    {name: '温度下限',yAxis: wendMin},
                ]
            }
        };
        series.push(s);

		lineoption = {
            toolbox: {
                show: true,
                right: '5%',
                lang: ['数据视图', '关闭', '刷新'],
                feature: {
                    dataView: {
                        readonly: true,
                        optionToContent: function (opt) {
                            let series = opt.series;
                            let clz = '';
                            let content = '<table  width="90%" class="table">' +
                                '<tr><th>设备</th>' +
                                '<th >温度</th>' +
                                '<th>电量</th>' +
                                '<th>时间</th>';
                            for(let i = 0; i < series.length ; i++) {
                                for (let j = 0; j < series[i].data.length; j++) {
                                    clz = (j % 2) == 1 ? 'alter' : '';
                                    content = content + '<tr class="' + clz + '"><td>' + series[i].data[j][3] + '</td>' +
                                        '<td>' + series[i].data[j][1] + '</td>' +
                                        '<td>' + series[i].data[j][2] + '</td>' +
                                        '<td>' + series[i].data[j][0] + '</td>' +
                                        "</tr>";
                                }
                            }
                            content = content + "</table>";
                            return content;
                        },
                    },
                },
            },
            legend: {
                data:legendData
            },
            grid:{
                x:40,
                x2:40,
                y2:24
            },
			calculable : true,
			xAxis : [
				{
					type : 'time'
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} °C'
					},
                    min: min,
                    max: max
				}
			],
			series : series
		};
		lineChart.setOption(lineoption);
	}
</script>
</body>
</html>
